<template>
  <el-dialog
      :model-value="dialogVisible"
      :title="props.dialogUseTitle"
      width="35%"
      @close="handleClose"
  >
    <el-col class="inline-flex " style="padding-bottom: 20px; width: 100%">
      <el-button size="large" type="primary" @click="selectUseInfo(form.nydjzh)" :disabled="disable">查询投入品信息</el-button>
    </el-col>
    <el-form size="default" :model="form" ref="formRef" label-width="130px" :rules="rules" label-position="left" >
      <el-form-item label="登记证证号" prop="nydjzh">
        <el-input v-model.trim="form.nydjzh" clearable placeholder="例：PD20111153"/>
      </el-form-item>
      <el-form-item label="投入品名称" prop="trpmc">
        <el-input v-model.trim="form.trpmc" clearable/>
      </el-form-item>
      <el-form-item label="生产商" prop="nyscz">
        <el-input v-model.trim="form.nyscz" clearable/>
      </el-form-item>
      <el-form-item label="防治信息" prop="nyfz">
        <el-input v-model.trim="form.nyfz" type="textarea"/>
      </el-form-item>
      <el-form-item label="使用方法" prop="nysyfa">
        <el-input v-model.trim="form.nysyfa" type="textarea"/>
      </el-form-item>
      <el-form-item label="规格" prop="trpgg">
        <el-input v-model.trim="form.trpgg" clearable/>
      </el-form-item>
      <el-form-item label="农药制剂" prop="nyzj">
        <el-input v-model.trim="form.nyzj" clearable/>
      </el-form-item>
      <el-form-item label="作用地块" prop="syqx">
        <el-select v-model.trim="form.syqx" clearable placeholder="请选择">
          <el-option
              v-for="item in chandiName"
              :key="item.value"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="作用产品" prop="sydx">
        <el-select v-model.trim="form.sydx" clearable placeholder="请选择">
          <el-option
              v-for="item in chanpingName"
              :key="item.value"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="经手人" prop="jsr">
        <el-input v-model.trim="form.jsr" clearable/>
      </el-form-item>
      <el-form-item label="使用数量" prop="sysl">
        <el-input v-model.trim="form.sysl" clearable/>
      </el-form-item>
      <el-form-item label="备注" prop="bz">
        <el-input v-model.trim="form.bz" clearable/>
      </el-form-item>
      <el-form-item label="使用日期" prop="syrq">
        <el-date-picker
            v-model="form.syrq"
            type="date"
            placeholder="选择日期"
            :size="'default'"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, watch, onMounted} from 'vue'
import {djzhUseInfo, getAllCdmc, getAllCpmc} from "@/api/apiPath/twoPart.js";
import {ElNotification} from "element-plus";
import {get} from "@/utils/axiosMethod.js";
import {getOptionsInfo} from "@/api/methods/initInfo.js";

const props = defineProps({
  dialogUseTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogUseTableValue: {
    type: Object,
    default: {}
  },
  queryForm: {
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})

const chandiName = ref([])
const chanpingName = ref([])

onMounted( ()=> {
  getOptionsInfo(getAllCdmc(), chandiName)
  getOptionsInfo(getAllCpmc(), chanpingName)
})
const formRef = ref(null)

const form = ref({
  nydjzh: '',
  trpmc: '',
  nyscz: '',
  nyfz: '',
  nysyfa: '',
  trpgg: '',
  nyzj: '',
  syqx: '',
  sydx: '',
  jsr: '',
  sysl: '',
  bz: '',
  syrq: '',
})
const selectUseInfo = async (djzh) => {
  try {
    if (djzh === null) return null
    get(djzhUseInfo(djzh), (data)=> {
      console.log(data)
      if (data === null) return null
      form.value = data
    })
  } catch (err) {
    console.log("ErrorselectTrpInfo" + err)
    ElNotification({
      message: "请求失败~",
      type: 'error',
      duration: 1500
    })
  }
}
onMounted(()=> {
  form.value = props.dialogUseTableValue
})
const disable = ref(true)
const regex = /^(?!\s*$).+/
watch(()=> form.value.nydjzh, (nydjzh)=> {
  console.log(nydjzh)
  disable.value = !regex.test(nydjzh)
  if (nydjzh === null || typeof nydjzh === "undefined") {
    disable.value = true
  }
}, {deep: true, immediate: true})
const rules = ref({
  trpmc: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  nydjzh: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  syqx: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  syrq: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  sydx: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  jsr: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = () => {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}

</script>

<style scoped>


</style>




















<!--
const selectUseInfo = async (djzh) => {
try {
let res = await djzhUseInfo(djzh)
form.value = res.data
} catch (err) {
console.log("ErrorselectTrpInfo" + err)
ElNotification({
message: "请求失败~",
type: 'error',
duration: 1500
})
}
}-->
